<template>
  <div class="contentWrapper wpx1200" id="contentWrapper">
    <el-card class="box-card mt20"  id="pdfDom" v-show="state==1"  v-loading="loading">
		  <div slot="header" class="clearfix">
		    <span v-text="'任务名称:' + taskName"></span>
		    <span class="cursor lan" @click="editName(taskId)">编辑</span>
		  </div>
		  <div>
		  	<div class="sysIconWrapper wpx1200 clearFix">
					<ul>
						<li class="tupian">
							<p class="title">图片总数</p>
							<p class="num" v-text="result.imgsNum"></p>
						</li>
						<li class="guanjian">
							<p class="title">
								<span>扫描关键词</span>
								<!--<span class="lan cursor" @click="dialogVisible=true">修改</span>-->
							</p>
							<p class="num" v-text="imgKeyWordNum"></p>
						</li>
						<!--<li class="yitupian">
							<p class="title">已扫描图片</p>
							<p class="num"  v-text="result.length"></p>
						</li>-->
						<li class="feiyong">
							<p class="title">费用总计</p>
							<p class="num" v-text="money + '元'"></p>
						</li>
						<li class="miangan"  v-show="payed">
							<p class="title">敏感词数</p>
							<p class="num" v-text="keyNum"></p>
						</li>
					</ul>
				</div>
				<div class="textarea ml30 overflowY" id="result" v-show="false"></div>
				<div class="sysIconWrapper mt50 pt50">
					计费说明：检测一张图片0.025元/张
				</div>
				<div class="sysIconWrapper">
					<div class="mt50 mb30 pb40 clearFix">
							<div class="floatl mr25">
								<!--<router-link to="/imgCheck">-->
									<el-button type="primary" size="small" @click="getResult()" v-text="btnVal" :disabled="disabledResult"></el-button>
								<!--</router-link>-->
							</div>
							<div class="floatl">
								<router-link to="/urlCheck">
									<!--<el-button  size="small" :disabled="disabled" @click="checkAgain">重新检测</el-button>-->
									<el-button  size="small">重新选择检测范围</el-button>
								</router-link>
							</div>
							<!--<div class="floatr">
								<el-button type="primary" size="small" @click="download">下载报告</el-button>
							</div>-->
					  </div>
				</div>
		  </div>
		</el-card>
		<el-card class="box-card mt20" v-show="state==2">
		  <div slot="header" class="clearfix">
		    <span>检测记录</span>
		    <span class="floatr cursor lan" @click="download">下载</span>
		  </div>
		  <div class="clearFix">
		  	<el-table
		      :data="tableData"
	        v-loading="loading"
		      style="width: 100%">
		      <el-table-column label="序号" width="100">
					  <template slot-scope="scope">
					    {{scope.row.taskId}}
					  </template>
					</el-table-column>
		      <el-table-column
		        label="详细信息"
		        width="880">
		        <template slot-scope="scope">
		        	<p class="clearFix">
		        		<div class="floatl w10 scbold">
		        			检测链接：
		        		</div>
		        		<div class="floatl w90">
		        			{{scope.row.taskUrl}}
		        		</div>
		        	</p>
		        	<p class="clearFix">
		        		<div class="floatl w10 scbold">
		        			截图链接：
		        		</div>
		        		<div class="floatl w90">
		        			{{scope.row.checkImg}}
		        		</div>
		        	</p>
		        	<p class="clearFix">
		        		<div class="floatl w10 scbold">
		        			前后摘要：
		        		</div>
		        		<div class="floatl w90">
		        			{{scope.row.checkResult}}
		        		</div>
		        	</p>
		        	<!--<p class="clearFix">
		        		<div class="floatl w10 scbold">
		        			检测内容：
		        		</div>
		        		<div class="floatl w90">
		        			{{scope.row.checkContext}}
		        		</div>
		        	</p>-->
		        	<p class="clearFix">
		        		<div class="floatl w10 scbold">
		        			关键词：
		        		</div>
		        		<div class="floatl w90">
		        			{{urlWordList}}
		        		</div>
		        	</p>
		        
					  </template>
		      </el-table-column>
		      <el-table-column label="操作">
			      <template slot-scope="scope">
			        <el-button  type="danger" v-text="btnText" @click="modifystatus(scope.row.checkId)"></el-button>
			      </template>
			    </el-table-column>
		    </el-table>
		  </div>
		</el-card>
			<el-dialog
		  title="提示"
		  :visible.sync="dialogVisible"
		  :lock-scroll=false
		  width="400px">
		  <div class="pt40 pl40">
		  	<el-form ref="form" :model="form" label-width="88px">
					<el-form-item label="检测关键词:">
				    <el-select v-model="value5" multiple placeholder="请选择关键词"  @change = "selectChange()">
					    <el-option
					      v-for="(item,index) in selectlist"
					      :key="index"
					      :label="item.wordName"
					      :value="index">
					    </el-option>
					  </el-select>
				  </el-form-item>
				</el-form>
		  </div>
		  
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
		  </span>
		</el-dialog>
		
		
  </div>
</template>

<script>
	import API from "@/api"
export default {
  name: 'imgResult',
  data () {
    return {
    	form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
       },
			result:{},
			imgKeyWordNum:0,
			htmlTitle: '文图灵辨网站检测结果',
			state:1,
			tableData:"",
			loading: false,
			urlWordList:"",
			taskName: '',
			taskId: "",
			payed: false,
			btnVal:"立即支付",
			money:"",
			btnText:"点击处理",
			keyNum:"",
			dialogVisible: false,
			value5: [],
			selectlist: [],
			value5Clone: [],
			disabled: true,
			list:[],
			loading: false,
			disabledResult: false
    }
  },
  created: function () {
  	this.checkData()
  },
  mounted: function(){
  	setMinHeight("contentWrapper");
  	$(window).resize(function() {
		  setMinHeight("contentWrapper")
		});
		this.getMoney()
		this.getNum()
		this.getList()
		this.value5 = JSON.parse(sessionStorage.getItem("urlWordId"));
		this.value5Clone = JSON.parse(sessionStorage.getItem("urlWordId"));
  },
  beforeDestroy: function(){
	  	sessionStorage.setItem("setdata",'')
	},
  methods: {
  	
  	download(){
  		API.check.download(API.header.getCookie("token"),"poi/downexcel/" + this.taskId).then(({data}) => {
       		window.open("http://47.106.160.27/sysfile/" + data,'_blank');
      })
  	},
  	checkAgain(){
    	var checkInfo = {
													info: {
														"content":this.result.content,
														"wordList":sessionStorage.getItem("urlWordList"),
														"wordId":this.list.wordId,
														taskName: this.taskName
													},
													token: API.header.getCookie("token"),
													url: "checkhtml"
												}
    	this.loading = true;
			API.check.check(checkInfo).then(({data}) => {
    			this.loading = false;
		       if(data.code=='0'){
		       		sessionStorage.setItem("urlResult",JSON.stringify(data.data))
		       		sessionStorage.setItem("urlList",JSON.stringify(data.list))
		       		sessionStorage.setItem("urlWordList",checkInfo.info.wordList)
		       		this.getNum();
		       }else{
						this.$message.error(data.msg);
		       }
	      })
  	},
  	selectChange(){
		if(JSON.stringify(this.value5Clone) != JSON.stringify(this.value5)){
			this.disabled = false;
		}else{
			this.disabled = true;
		}
			sessionStorage.setItem("urlWordId",JSON.stringify(this.value5));
	  	var indexArr = this.value5;
	  	var selectArr = [];
	  	for(var i=0;i<indexArr.length;i++){
	  		selectArr.push(this.selectlist[indexArr[i]])
	  	}
	  	var newArr = {"wordTxt":"","wordName":"","wordId":""};
	  	for(var i=0;i<selectArr.length;i++){
	  		newArr.wordName += selectArr[i].wordName + " ";
	  		newArr.wordId += selectArr[i].wordId + " ";
	  		if(selectArr[i].wordTxt.substr(selectArr[i].wordTxt.length-1,1) == " " || selectArr[i].wordTxt.substr(selectArr[i].wordTxt.length-1,1) == " " ){
	  			newArr.wordTxt += selectArr[i].wordTxt.substr(0,selectArr[i].wordTxt.length-1) + " ";
	  		}else{
	  			newArr.wordTxt += selectArr[i].wordTxt + " ";
	  		}
	  	}
	  	newArr.wordTxt = newArr.wordTxt.substr(0,newArr.wordTxt.length-1);
	  	newArr.wordName = newArr.wordName.substr(0,newArr.wordName.length-1);
	  	newArr.wordId = newArr.wordId.substr(0,newArr.wordId.length-1);
	  	this.list = newArr;
	  	this.imgKeyWordNum = newArr.wordTxt.split(" ").length;
	  	sessionStorage.urlWordList = newArr.wordTxt;
	  	console.info(newArr)
  		if(this.value5.length==0){
  			this.disabled = true;
  			this.imgKeyWordNum =0;
  		}
	  },
  	getList(){
	  	API.setting.getList(API.header.getCookie("token")).then(({data}) => {
	       if(data.code=='0'){
						this.selectlist = data.data;
	       }else{
						this.$message.error(data.msg);
	       }
      })
	  },
  	getMoney(){
     	API.check.jisuan(this.result.imgsNum).then(({data}) => {
		       if(data.code=='0'){
							this.money = data.data
		       }else{
							this.money = "计算错误"
		       }
	      })
  	},
  	download(){
  		API.check.download(API.header.getCookie("token"),"poi/downexcel/" + this.taskId).then(({data}) => {
       		window.open("http://47.106.160.27/sysfile/" + data,'_blank');
      })
  	},
  	editName(id){
// 		console.error(id)
   		this.$prompt('请输入新任务名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          lockScroll: false
        }).then(({ value }) => {
        	var checkInfo = {
        		token: API.header.getCookie("token"),
        		Obj:{
        			taskId:id,
        			taskName:value,
        		}
        	}
         	API.check.editTaskName(checkInfo).then(({data}) => {
			       if(data.code=='0'){
			       		this.taskName = data.data.taskName;
			       		this.$message.success("修改成功")
			       }else{
						this.$message.error(data.msg);
			       }
		      })
          
        }).catch(() => {});
   	},
	  checkData(){
	  		if(sessionStorage.getItem("urlResult")){
		  		var data = JSON.parse(sessionStorage.getItem("urlResult"))
					this.result = data
					this.tableData = JSON.parse(sessionStorage.getItem("urlList"))
					this.taskName = data.taskName;
					this.taskId = data.taskId;
		  	}
	  		if(sessionStorage.getItem("urlWordList")){
	  			this.imgKeyWordNum = sessionStorage.getItem("urlWordList").split(" ").length
	  		}
	  		this.urlWordList = sessionStorage.getItem("urlWordList")
	  },
			getResult(){
				var id=this.taskId
				if(this.payed){
//					this.state = 2;
					this.$router.push({
				      path: `/recordDetail?${id}`,
				   })
					
				}else{
					this.btnVal = "查看报告";
					this.payed = true;
					if(this.keyNum==0){
						this.disabledResult = true;
					}
					var token = API.header.getCookie("token");
					var url = "paytask/" + this.taskId;
					
         	API.check.urlPay(token,url).then(({data}) => {
			       if(data.code=='0'){
//			       		this.taskName = data.data.taskName;
			       		this.$message.success("支付成功")
			       		if(this.keyNum==0){
			       			//调用删除接口 taskid
						  		var info = {
				        		token: API.header.getCookie("token"),
				        		id:this.taskId
				        	}
						  		API.record.deleteRecord(info).then(({data}) => {
							       if(data.code=='0'){
												
							       }else{
												this.$message.error(data.msg);
							       }
						      })
			       		}
			       }else{
						this.$message.error(data.msg);
			       }
		      })
					
				}
			},
			getNum(){
				var arr = this.tableData;
				var that = this;
				var keywordArr = sessionStorage.getItem("urlWordList").replace(new RegExp('，','g'),',').split(" ");
				var html = '';
				$.each(arr, function(index,val) {
//					console.error(val.checkResult)
						for(var i=0;i<keywordArr.length;i++){
							if(keywordArr[i] !=''){
								html+=val.checkContext.replace(new RegExp(keywordArr[i],'g'),'<span class="bgwarn">' + keywordArr[i] + '</span>')
								if(val.checkContext.indexOf(keywordArr[i]) != -1){
									that.tableData[index].userId = true;
//									console.error(that.result)
								}
							}
			  		}					
				});
		  	document.getElementById("result").innerHTML = html;
		  	this.keyNum = document.getElementsByClassName("bgwarn").length;
		  	if(this.keyNum==0){
		  		this.disabled = true;
		  		
		  	}
			}
	}
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
